<template>
	<view class="paymentInformation">
		<view class="paymentIcon">
			<icon class="icon-box-img" type="success" color="#006eff" size="50"></icon>
			<text>缴费成功</text>
			<text>您已成功缴费，可在个人中心中查看缴费记录</text>
		</view>
		<view class="paymentBtn">
			<view @click="toPaymentDetail">查看缴费详情</view>
			<view @click="toIndex">返回首页</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive
	} from 'vue'
	const Data = reactive({
		orderId: 0
	})
	const toIndex = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	const toPaymentDetail = () => {
		uni.navigateTo({
			url: `/pages/selfPayment/paymentDetail/paymentDetail?orderId=${Data.orderId}`
		})
	}
	onLoad((options) => {
		options.orderId && (Data.orderId = options.orderId);
	})
</script>

<style lang="less" scoped>
	.paymentInformation {
		width: 750rpx;
		height: 100vh;
		background-color: #fdfeff;
		box-sizing: border-box;
		padding: 0 35rpx;

		.paymentIcon {
			width: 100%;
			height: 500rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #a4a4a4;
			font-size: 30rpx;
			font-weight: 600;

			text:nth-child(2) {
				margin: 40rpx 0 25rpx 0;
				font-size: 35rpx;
				color: #353434;
			}
		}

		.paymentBtn {
			width: 100%;

			view {
				width: 100%;
				height: 80rpx;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #3478f7;
				font-size: 40rpx;
				color: #fff;
				font-weight: 600;
				margin: 35rpx 0;

				&:nth-child(2) {
					background-color: #e4f0ff;
					color: #0066ff;
				}
			}
		}
	}
</style>
